<template>
  <div class="limited">
    <el-row>
      <el-col :span="6">
        <div class="left-box">
          <LeftList ref="leftListRef" :templates="templates" :listData="listData" :selectedIndex.sync="selectedIndex"
            :lLoading="lLoading" :lNoMore="lNoMore" @clickItem="clickItem">
            <div slot-scope="{row}" slot="title" class="flex_between">
              <div class="flex1 flex_row">
                <div class="img-box">
                  <el-image class="img" :src="row.icon_rel"></el-image>
                </div>
                <div>
                  <span class="font_size16 bold">{{ row.title }}</span>
                  <span>{{ row.txt_s }}</span>
                </div>
              </div>
              <div>
                <span class="font_size16 font_black7">{{ row.num_f || '' }}</span>
                <i class="el-icon-arrow-right" style="font-size: 18px;color: #999;"></i>
              </div>
            </div>
          </LeftList>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="rigth-box">
          <template v-if="isShowLs">
            <LoadList :loading="lLoading" :no-more="lNoMore" :containerHeight="dynamicHeight" :distance="100"
              @load-more="loadFun">
              <template v-if="listInfoData && listInfoData.length > 0">
                <div class="item-box" v-for="(ls, lsindex) in listInfoData" :key="lsindex" @click.stop="cardsClick(ls)">
                  <div class="flex_between">
                    <div class="flex1 flex_row">
                      <div class="img-box">
                        <el-image class="img" :src="ls.img"></el-image>
                      </div>
                      <div class="flex1">
                        <p class="font_size16 bold hover-color">{{ ls.title }}</p>
                        <p class="font_black7 hover-color font_size14" style="margin-bottom: 0;">时间：{{ ls.etime || '--'
                        }}</p>
                      </div>
                    </div>
                    <div>
                      <i class="el-icon-arrow-right" style="font-size: 18px;color: #999;"></i>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <empty></empty>
              </template>
            </LoadList>
          </template>
          <template v-else>
            <div style="overflow-y: auto;">
              <div class="flex_row cursor_pointer" @click="clickBack">
                <i class="el-icon-arrow-left" style="font-size: 18px;color: #999;"></i>
                <span class="font_size14 font_black9"> 返回 </span>
              </div>
              <div class="flex_center_column" style="padding: 0 50px;">
                <h1 class="mt20 mb30">{{ detailInfo.title || '--' }}</h1>
              </div>
              <div class="flex_center_column mb30" v-if="detailInfo.video">
                <div class="video-container">
                  <video class="video-box" :src="detailInfo.video" controls></video>
                </div>
              </div>
              <div class="" style="padding: 0 50px;">
                <rich-text :nodes="detailInfo.txt"></rich-text>
              </div>
              <div style="height: 100px;"></div>
            </div>
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from '@vue/composition-api'
import LeftList from "@/pages/setting/components/leftList.vue"
import LoadList from "@/components/commV2/LoadList/index.vue"
import config from "@/js/conf/Config.js"
import API from "@/js/conf/api.js"
import { useCommonHooks } from '@/hooks/useCommonHooks.js'

// 使用全局状态
const { stateHooks } = useCommonHooks()
const dynamicHeight = ref(stateHooks.leftHeight)
const maxPnum = 20
// 获取当前组件实例
const { proxy } = getCurrentInstance()

const templates = ref([{
  type: "slot",
  key: "title",
}
])

const listData = ref([])
const selectedIndex = ref(0)
const detailID = ref('')
const pfrom = ref(0)
const lLoading = ref(false)
const lNoMore = ref(false)
const isShowLs = ref(true)

const loadFun = () => {
  if (lNoMore.value || lLoading.value) return
  pfrom.value += 20
  if (listInfoData.value.length > 0) {
    pfrom.value += 20
    getInfoList(false)
  }
}

// 内容详情
const detailInfo = ref({})
const cardsClick = async (item) => {
  try {
    let res = await proxy.$api({ url: config.help_heper_info, data: { catid: item.catid2 } })
    if (res.status == 1) {
      detailInfo.value = res?.data || {}
      isShowLs.value = false
    } else {
      proxy.$message({
        message: res?.msg || '暂无详情内容',
        type: 'error'
      })
      isShowLs.value = true
    }
  } catch (error) {
  }
}

const clickBack = () => {
  isShowLs.value = true
}

const getEventLs = async (t = true) => {
  try {
    let res = await proxy.$api({ url: config.help_cat_ls, data: { fid: 1 } })
    lLoading.value = false
    if (res.status == 1) {
      let result = res.data
      if (result && result.length > 0) {
        listData.value.push(...result)
        // 确保索引在有效范围内
        const validIndex = Math.min(selectedIndex.value, listData.value.length - 1)
        if (t == true) {
          detailID.value = listData.value[validIndex]?.id
          resetListInfoFc()
          getInfoList()
        }
      }
    }
  } catch (error) {
    lLoading.value = false
    lNoMore.value = true
  } finally {
    lLoading.value = false
  }
}

const listInfoData = ref([])
const getInfoList = async (t) => {
  lLoading.value = true
  if (t == true) {
    pfrom.value = 0
    listInfoData.value = []
  }
  try {
    let res = await proxy.$api({
      url: config.help_helper_ls, data: {
        catid: detailID.value,
        pfrom: pfrom.value,
        pnum: maxPnum
      }
    })
    let result = res.data || []
    if (res.status == 1) {
      if (result && result.length > 0) {
        listInfoData.value.push(...result)
      }
      if (res.status == 1 && result.length < maxPnum) {
        lNoMore.value = true
      } else {
        lNoMore.value = false
      }
    } else {
      lNoMore.value = true;
    }
  } catch (error) {
    lLoading.value = false
    lNoMore.value = true
  } finally {
    lLoading.value = false
  }
}

const clickItem = (index) => {
  isShowLs.value = true
  resetListInfoFc()
  detailID.value = listData.value[index]?.id
  getInfoList()
}

const resetListInfoFc = () => {
  pfrom.value = 0
  listInfoData.value = []
}

onMounted(async () => {
  getEventLs()
})

</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.limited {
  max-height: 100vh;
  height: calc(100vh - 90px);
  /* 确保最小高度为视窗高度 */
  overflow: hidden;

  ::v-deep .el-row {
    height: 100%;
  }

  ::v-deep .el-col {
    height: 100%;
  }

  .left-box,
  .rigth-box {
    width: 100%;
    padding: 0 10px 0 10px;
    height: 100%;

    .img-box {
      width: 60px;
      height: 60px;
      border-radius: 4px;
      margin-right: 10px;

      .img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: cover;
      }
    }
  }

  .left-box {
    border-right: 1px solid #e6e6e6;
  }

  .rigth-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .item-box {
      padding: 14px 6px;
      border-bottom: 1px solid #ece9e9;
      cursor: pointer;
      transition: all 0.3s linear;
      border-radius: 4px;
    }

    .item-box:hover {
      background-color: #f0f0f0;
    }
  }
}

.input-w {
  width: 400px;
}

/* 添加容器样式 */
.video-container {
  width: 100%;
  max-width: 350px;
  position: relative;
  /* 假设视频宽高比为 16:9，计算方式为 9/16*100% = 56.25% */
  padding-top: 56.25%; 
  margin: 0 auto;
  background-color: #000;
}

/* 修改视频样式 */
.video-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>